<template>
  <div class="min-h-screen bg-gray-50">
    <div class="flex">
      <!-- 右侧内容区 -->
      <div class="flex-1 p-8" style="width: 1000px">
        <!-- 岗位管理 -->
        <div class="bg-white rounded-lg shadow-sm p-8">
          <div class="flex justify-between items-center mb-6">
            <div class="relative flex-1">
              <input
                type="text"
                v-model="jobSearchQuery"
                placeholder="搜索岗位名称..."
                class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
              />
              <el-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                <Search />
              </el-icon>
            </div>
            <button @click="openJobDialog()" class="ml-4 px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded-lg whitespace-nowrap flex items-center gap-2">
              <el-icon><Briefcase /></el-icon>
              发布岗位
            </button>
          </div>
          <el-table :data="filteredJobs" border stripe>
            <el-table-column prop="account" label="发布者" width="120" />
            <el-table-column prop="jobName" label="岗位" width="200" />
            <el-table-column prop="jobMajor" label="专业" width="200" />
            <el-table-column prop="company" label="公司" width="200" />
            <el-table-column prop="address" label="工作地点" width="200" />
            <el-table-column prop="salary" label="薪资范围" width="200" />
            <el-table-column prop="required" label="岗位需求" width="300" />
            <el-table-column prop="createTime" label="发布时间" width="120" :formatter="formatDate"/>
            <el-table-column label="状态" width="120">
              <template #default="scope">
                <el-button :type="scope.row.status === 1 ? 'success' : 'warning'" size="small" class="!rounded-button whitespace-nowrap">
                  {{ scope.row.status === 1 ? '已通过' : '未通过' }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="150">
              <template #default="{ row }">
                <div class="flex">
                  <button @click="editJob(row)" v-if="row.status===0" class="button  bg-blue-500 hover-bg-blue-700">编辑</button>
                  <button @click="openJob(row)" v-if="row.status===1" class="button bg-green-600 hover-bg-green-700">查看</button>
                  <button @click="confirmDeleteJob(row)" class="button bg-red-600 hover-bg-red-700">删除</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 岗位表单弹窗 -->
    <el-dialog v-model="jobDialogVisible" :title="editingJob ? '编辑岗位' : '发布岗位'" width="500px" destroy-on-close>
      <div class="space-y-4">
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">发布者：</div>
          <el-input v-model="jobForm.account" disabled placeholder="请输入发布者姓名" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">岗位：</div>
          <el-input v-model="jobForm.jobName" placeholder="请输入岗位名称" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">专业：</div>
          <el-input v-model="jobForm.jobMajor" placeholder="请输入专业要求" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">薪资范围：</div>
          <el-input v-model="jobForm.salary" placeholder="请输入薪资范围" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">公司：</div>
          <el-input v-model="jobForm.company" placeholder="请输入公司名称" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">工作地点：</div>
          <el-input v-model="jobForm.address" placeholder="请输入工作地点" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">岗位需求：</div>
          <el-input v-model="jobForm.required" type="textarea" :rows="4" placeholder="请输入岗位详情信息" class="flex-1" />
        </div>

      </div>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap" @click="jobDialogVisible = false">取消</button>
          <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap" @click="saveJob">
            {{ editingJob ? "保存" : "发布" }}
          </button>
        </div>
      </template>
    </el-dialog>
<!--    查看表格-->
    <el-dialog v-model="showjobDialogVisible" :title="'查看岗位'" disabled width="500px" destroy-on-close>
      <div class="space-y-4">
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">发布者：</div>
          <el-input v-model="jobForm.account" disabled placeholder="请输入发布者姓名" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">岗位：</div>
          <el-input v-model="jobForm.jobName" placeholder="请输入岗位名称" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">专业：</div>
          <el-input v-model="jobForm.jobMajor" placeholder="请输入专业要求" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">薪资范围：</div>
          <el-input v-model="jobForm.salary" placeholder="请输入薪资范围" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">公司：</div>
          <el-input v-model="jobForm.company" placeholder="请输入公司名称" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">工作地点：</div>
          <el-input v-model="jobForm.address" placeholder="请输入工作地点" class="flex-1" />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">岗位需求：</div>
          <el-input v-model="jobForm.required" type="textarea" :rows="4" placeholder="请输入岗位详情信息" class="flex-1" />
        </div>

      </div>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap" @click="showjobDialogVisible = false">取消</button>
          <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap" @click="saveJob">
            {{ editingJob ? "保存" : "发布" }}
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除确认弹窗 -->
    <el-dialog v-model="jobDeleteConfirmVisible" title="确认删除" width="400px" destroy-on-close>
      <div class="p-4">
        <p class="text-gray-600">确定要删除这个岗位吗？此操作不可逆。</p>
      </div>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap" @click="jobDeleteConfirmVisible = false">取消</button>
          <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 !rounded-button whitespace-nowrap" @click="deleteJob">确认删除</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { Search, Briefcase } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {getWorkPostList,updateWorkPost,addWorkPost ,deleteWorkPost} from "../../../api/boss/boss";

export default {
  methods: {
    //日期格式化方法
    formatDate(row, column, cellValue) {
      if (!cellValue) return '';
      const d = new Date(cellValue);
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
    }
  },


  name: "JobManagement",
  components: { Search, Briefcase },
  setup() {

    const jobDeleteConfirmVisible = ref(false);
    const jobDialogVisible = ref(false);
    const editingJob = ref(false);
    const jobToDelete = ref(null);
    const jobSearchQuery = ref("");
    const jobForm = ref({
      account:'',
      jobName:'',
      jobMajor:'',
      company:'',
      salary:'',
      required:'',
      address:''
    });
    let jobs = ref([]);

    onMounted(() => {
      getPositionList(JSON.parse(localStorage.getItem("userInfo")).account)
    });
    function getPositionList(data) {
      getWorkPostList(data).then(function (response) {
          jobs.value=response
      })
    }
    const filteredJobs = computed(() => {
      if (!jobSearchQuery.value) return jobs.value;
      const query = jobSearchQuery.value.toLowerCase();
      return jobs.value.filter((job) => job.position.toLowerCase().includes(query) || job.company.toLowerCase().includes(query));
    });

    const openJobDialog = () => {
      editingJob.value = false;
      jobForm.value={
        account:'',
        jobName:'',
        jobMajor:'',
        company:'',
        salary:'',
        required:'',
        address:'',
        id:''
      }
      jobForm.value.account=JSON.parse(localStorage.getItem("userInfo")).account
      jobDialogVisible.value = true;
    };

    const editJob = (job) => {
      editingJob.value = true;
      jobForm.value = job;
      jobDialogVisible.value = true;
    };
    let showjobDialogVisible=ref(false)

    function openJob (job) {
      jobForm.value = job;
      showjobDialogVisible.value = true;
      console.log(showjobDialogVisible.value)
    };


    const saveJob = () => {
      if (!jobForm.value.account || !jobForm.value.jobName || !jobForm.value.company || !jobForm.value.required) {
        ElMessage.error("请填写完整的岗位信息");
        return;
      }
      if (editingJob.value) {
          updateWorkPost(jobForm.value).then(function (response) {
            getPositionList(JSON.parse(localStorage.getItem("userInfo")).account)
          })
      } else {
          addWorkPost(jobForm.value).then(function () {
            getPositionList(JSON.parse(localStorage.getItem("userInfo")).account)
          })
      }
      ElMessage.success(editingJob.value ? "岗位更新成功" : "岗位发布成功");
      jobDialogVisible.value = false;
    };

    const confirmDeleteJob = (job) => {
      jobToDelete.value = job;
      jobDeleteConfirmVisible.value = true;
    };

    const deleteJob = () => {
      jobs.value = jobs.value.filter((job) => job.id !== jobToDelete.value.id);
      console.log(jobs.value[0].id)
      deleteWorkPost(jobs.value[0].id)
      ElMessage.success("岗位删除成功");
      jobDeleteConfirmVisible.value = false;
    };

    return {
      jobDeleteConfirmVisible,
      jobDialogVisible,
      showjobDialogVisible,
      editingJob,
      jobToDelete,
      jobSearchQuery,
      jobForm,
      jobs,
      filteredJobs,
      openJobDialog,
      editJob,
      saveJob,
      confirmDeleteJob,
      deleteJob,
      openJob,
    };
  },
};
</script>

<style scoped>
.min-h-screen {
  min-height: 100vh;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.p-8 {
  padding: 2rem;
}

.bg-white {
  background-color: #fff;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.flex-1 {
  flex: 1;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.left-3 {
  left: 0.75rem;
}

.text-gray-400 {
  color: #94a3b8;
}

.w-full {
  width: 100%;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pr-4 {
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.border {
  border: 1px solid #e2e8f0;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.focus\\\\:outline-none:focus {
  outline: none;
}

.focus\\\\:ring-2:focus {
  box-shadow: 0 0 0 2px #63b3ed;
}

.focus\\\\:ring-blue-500:focus {
  box-shadow: 0 0 0 2px #63b3ed;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ml-4 {
  margin-left: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.bg-blue-500 {
  background-color: #3b82f6;
}

.text-white {
  color: #ffffff;
}

.hover\\\\:bg-blue-600:hover {
  background-color: #2563eb;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.items-center {
  align-items: center;
}

.gap-2 {
  gap: 0.5rem;
}

.flex {
  display: flex;
  gap: 0.5rem;
}

.button {
  padding: 0.25rem 0.75rem;
  color: #ffffff;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.bg-blue-600 {
  background-color: #3b82f6;
}


.hover-bg-blue-700:hover {
  background-color: #2563eb;
}

.bg-red-600 {
  background-color: #ef4444;
}

.hover-bg-red-700:hover {
  background-color: #dc2626;
}
</style>
